<template>
   <z-paging
      ref="paging"
      v-model="list"
      fixed
      refresher-threshold="160rpx"
      @query="queryList"
      :useVirtualList="useVirtualList"
      :useInnerList="useInnerList"
      :cellKeyName="cellKeyName"
      :innerListStyle="innerListStyle"
      :preloadPage="preloadPage"
      :cellHeightMode="cellHeightMode"
      :virtualScrollFps="virtualScrollFps"
      safe-area-inset-bottom
      auto-show-back-to-top
      use-custom-refresher
      show-refresher-update-time
      auto-show-system-loading
      system-loading-text="loading..."
      show-refresher-when-reload
      loading-full-fixed
      back-to-top-with-animate
      :show-loading-more-no-more-view="false"
      :loading-more-loading-text="{ en: '英文的加载中', 'zh-cn': '中文的加载中', 'zh-hant-cn': '繁体的加载中' }"
   >
      <!-- show-refresher-update-time    use-custom-refresher -->

      <template slot="top">
         <slot name="top"></slot>
      </template>

      <template slot="bottom">
         <slot name="bottom"></slot>
      </template>
      <template slot="empty">
         <yy-empty></yy-empty>
      </template>

      <template slot="cell" slot-scope="{ item, index }">
         <slot name="cell" :item="item" :index="index" />
      </template>

      <!-- <yy-refresher slot="refresher" slot-scope="{ refresherStatus }" :status="refresherStatus"></yy-refresher> -->

      <!-- <yy-nomore slot="loadingMoreNoMore"></yy-nomore> -->

      <slot />
   </z-paging>
</template>

<script>
export default {
   name: 'my-paging',
   data() {
      return {
         list: []
      };
   },
   props: {
      //用于接收父组件v-model所绑定的list的值
      value: {
         type: Array,
         default: function () {
            return [];
         }
      },
      //是否使用虚拟列表，默认为否
      useVirtualList: {
         type: Boolean,
         default: false
      },
      //是否在z-paging内部循环渲染列表(内置列表)，默认为否。若use-virtual-list为true，则此项恒为true
      useInnerList: {
         type: Boolean,
         default: false
      },
      //内置列表cell的key名称，仅nvue有效，在nvue中开启use-inner-list时必须填此项
      cellKeyName: {
         type: String,
         default: ''
      },
      //innerList样式
      innerListStyle: {
         type: Object,
         default: function () {
            return {};
         }
      },
      //预加载的列表可视范围(列表高度)页数，默认为7，即预加载当前页及上下各7页的cell。此数值越大，则虚拟列表中加载的dom越多，内存消耗越大(会维持在一个稳定值)，但增加预加载页面数量可缓解快速滚动短暂白屏问题
      preloadPage: {
         type: [Number, String],
         default: 7
      },
      //虚拟列表cell高度模式，默认为fixed，也就是每个cell高度完全相同，将以第一个cell高度为准进行计算。可选值【dynamic】，即代表高度是动态非固定的，【dynamic】性能低于【fixed】。
      cellHeightMode: {
         type: String,
         default: 'fixed'
      },
      //虚拟列表scroll取样帧率，默认为60，过高可能出现卡顿等问题
      virtualScrollFps: {
         type: [Number, String],
         default: 60
      }
   },
   watch: {
      //监听页面v-mode传过来的值，同时传给z-paging
      value(newVal) {
         this.list = newVal;
      },
      //监听z-paging给当前组件的值，同时传给页面
      list(newVal) {
         //通过emit input修改页面中v-model绑定的值
         this.$emit('input', newVal);
      }
   },
   methods: {
      //监听z-paging的@query事件，通过emit传递给页面
      queryList(pageNo, pageSize) {
         this.$emit('query', pageNo, pageSize);
      },
      //接收页面传递过来的reload事件，传给z-paging
      reload(data) {
         this.$refs.paging.reload(data);
      },
      //接收页面传递过来的complete事件，传给z-paging
      complete(data) {
         this.$refs.paging.complete(data);
      }
      /*
			//如果是使用页面滚动，则需要添加以下两行，注意页面那边要引入mixins，与使用页面滚动示例写法相同。
			//接收页面传递过来的updatePageScrollTop事件，传给z-paging
			updatePageScrollTop(data){
				this.$refs.paging.updatePageScrollTop(data);
			},
			//接收页面传递过来的doLoadMore事件，传给z-paging
			doLoadMore(){
				this.$refs.paging.doLoadMore();
			}
			*/
   }
};
</script>

<style></style>
